<template>
  <div class="bill-box">

    <div class="bill-screen-box">
      <div class="bill-screen-con">
        <span class="bill-text">账单列表</span>
        <div class="bill-screen-item" @click="openModal">
          <span class="bill-type-text">{{billName}}</span>
          <img src="./drop_down.png" class="drop-pic" onclick="return false"/>
        </div>
      </div>
      <div class="bill-line"></div>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="bill-con"
    >
      <div class="bill-list" v-for="(bill,index) in billList" :key="index" @click="showDetail(bill)">
        <div class="bill-title">
          <span v-if="bill.billType==1">{{bill.type | changeType}}:</span>
          <span v-else-if="bill.billType==2 && bill.moneyTo =='奖励提现'">账户提现:</span>
          <span v-else-if="bill.billType==2 && bill.moneyTo =='借支提现'">借支提现:</span>
          <span v-else-if="bill.billType==2 && bill.moneyTo =='工资提现'">工资提现:</span>
          <span v-else>账户提现:</span>
          <span>{{bill.money}}</span>
        </div>
        <div class="bill-time">
          <div class="time" v-if="bill.billType==1">{{bill.time | format}}</div>
          <div class="time" v-if="bill.billType==2">{{bill.endTime}}</div>
          <div class="status">
            <span v-if="bill.billType==1">已到蓝聘账户</span>
            <span v-else-if="bill.billType==2" :class="{'error-tip':bill.status=='到账失败'}">{{bill.status}}</span>
          </div>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="billList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">没有相关记录!</div>
      </div>
    </div>

    <div class="screen-modal" v-show="showModal">
      <div class="screen-con">
        <div class="content-sec">
          <div class="sec" @click="queryScreen(0,'全部账单')" :class="{'active2':type == 0}">全部账单
            <img src="./get.png" v-if="type == 0" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(1,'邀请奖励')" :class="{'active2':type == 1}">邀请奖励
            <img src="./get.png" v-if="type == 1" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(2,'平台奖励')" :class="{'active2':type == 2}">平台奖励
            <img src="./get.png" v-if="type == 2" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(3,'账户提现')" :class="{'active2':type == 3}">账户提现
            <img src="./get.png" v-if="type == 3" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(4,'借支提现')" :class="{'active2':type == 4}">借支提现
            <img src="./get.png" v-if="type == 4" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(5,'工资提现')" :class="{'active2':type == 5}">工资提现
            <img src="./get.png" v-if="type == 5" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(6,'返费到账')" :class="{'active2':type == 6}">返费到账
            <img src="./get.png" v-if="type == 6" class="pic7" onclick="return false"/>
          </div>
          <div class="sec" @click="queryScreen(7,'其他')" :class="{'active2':type == 7}">其他
            <img src="./get.png" v-if="type == 7" class="pic7" onclick="return false"/>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {formatDate, getSessionStore, toDecimal} from "../../config/util"
  import {Base64} from 'js-base64'
  import {baseUrl} from "../../config/env"

  export default {
    data() {
      return {
        userSign: "",
        billList: [],
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false,
        billName: "全部账单",
        showModal: false,
        type: 0 //全部账单-> 0;邀请奖励-> 1;平台奖励-> 2;账户提现-> 3;借支到账-> 4;工资账单-> 5;返费到账-> 6;其他-> 7
      }
    },
    mounted() {
      this.userSign = Base64.decode(getSessionStore("openid"));
    },
    methods: {
      queryScreen(index, key) {//根据状态查询
        this.type = index;
        this.billName = key;
        this.showModal = false;
        this.currentPage = 1;
        this.PageSize = 20;
        this.billList = [];
        this.loading = true;
        this.finished = false;
        this.queryBill();
      },
      openModal() {//打开筛选
        this.showModal = true;
      },
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.queryBill();
            this.timer = null;
          }, 500)
        }
      },
      queryBill() {//查询账单记录
        this.axios.get(baseUrl + "/billrecord/query_billrecord?sgin=" + this.userSign + "&status=" + this.type + "&page=" + this.currentPage + "&size=" + this.PageSize + "&versionType=2.4").then((res) => {
          let billObj = res.data;
          if (billObj.code == 0) {
            if (billObj.data != null && billObj.data.length > 0) {
              this.billList = this.billList.concat(billObj.data);
              for (let i = 0, length = this.billList.length; i < length; i++) {

                this.billList[i].money = toDecimal(this.billList[i].money);
                if (this.billList[i].billType == 2) {
                  if (this.billList[i].status == 1) {
                    this.billList[i].endTime = formatDate(new Date(this.billList[i].time), 'yyyy-MM-dd');
                  } else {
                    this.billList[i].endTime = formatDate(new Date(this.billList[i].set_time), 'yyyy-MM-dd');
                  }

                  if (this.billList[i].status == 1) {//1提现申请2银行接受处理3银行处理成功4银行转账失败
                    this.billList[i].status = "待处理";
                  } else if (this.billList[i].status == 2) {
                    this.billList[i].status = "处理中";
                  } else if (this.billList[i].status == 3) {
                    this.billList[i].status = "到账成功";
                  } else if (this.billList[i].status == 4) {
                    this.billList[i].status = "到账失败";
                  }
                }
              }

              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.billList.length >= billObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(billObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      showDetail(bill) {
        if (bill.billType == 1) {
          let date = new Date(bill.time);
          let stamp = formatDate(date, 'yyyy-MM-dd hh:mm');
          this.$router.push({
            path: '/otherdetail',
            query: {billType: bill.billType, type: bill.type, money: bill.money, stamp: stamp}
          });
        } else {
          this.$router.push({path: '/billdetail', query: {id: bill.id}});
        }
      }
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
      changeType(type) {
        let temp = "";
        if (type == 0) {
          temp = "其它";
        } else if (type == 1) {
          temp = "借支到账";
        } else if (type == 2) {
          temp = "管理费";
        } else if (type == 3) {
          temp = "工资到账";
        } else if (type == 4) {
          temp = "返费到账";
        } else if (type == 5) {
          temp = "邀请注册奖励";
        } else if (type == 7) {
          temp = "代扣借支";
        } else if (type == 8) {
          temp = "邀请入职奖励";
        } else if (type == 9) {
          temp = "蓝聘红包";
        } else if (type == 10) {
          temp = "完善资料奖励";
        } else if (type == 11) {
          temp = "积分兑换奖励";
        } else if (type == 12) {
          temp = "分享点赞奖励";
        }
        return temp;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .bill-box
    width: 100%
    height: 100%
    .bill-screen-box
      position: fixed
      top: 0
      z-index: 99
      display: flex
      flex-direction: column
      width: 100%
      height: 1.333rem
      background: #FFF
      .bill-screen-con
        display: flex
        align-items: center
        justify-content: space-between
        width: 100%
        height: 1.067rem
        .bill-text
          padding-left: 0.32rem
          font-size: 0.427rem
          font-weight: 500
          color: #333
        .bill-screen-item
          display: flex
          align-items: center
          margin-right 0.32rem
          .bill-type-text
            font-size: 0.347rem
            padding-right: 0.2rem
            color: rgba(60, 175, 255, 1)
          .drop-pic
            width: 0.253rem
            height: 0.16rem
      .bill-line
        width: 100%
        height: 0.267rem
        background: #f5f5f5
    .bill-con
      padding-top: 1.333rem
      .bill-list
        display: flex
        align-items: center
        width: 100%
        height: 1.893rem
        border-bottom: 0.013rem solid rgba(224, 224, 224, 1)
        .bill-title
          flex: 1
          margin-left: 0.32rem
          font-size: 0.44rem
          color: rgba(24, 24, 24, 1)
        .bill-time
          margin-right: 0.32rem
          .time
            font-size: 0.387rem
            color: rgba(146, 146, 146, 1)
          .status
            display: flex;
            justify-content: flex-end
            padding-top: 0.267rem
            font-weight: 500
            font-size: 0.333rem
            color: rgba(24, 24, 24, 1)
            .error-tip
              color: rgba(255, 83, 83, 1)
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
    .screen-modal
      position: fixed
      top: 1.333rem
      left: 0
      right: 0
      bottom: 0
      z-index: 99
      background-color: rgba(0, 0, 0, 0.5)
      .screen-con
        width: 100%
        height: auto
        background: #FFF
        .content-sec
          display: flex
          flex-direction: column
          width: auto
          height: 100%
          margin-left: 0.48rem
          margin-right: 0.507rem
          .sec
            display: flex
            align-items: center
            height: 1.067rem
            line-height: 1.067rem
            font-size: 0.427rem
            color: rgba(102, 102, 102, 1)
            &:nth-child(1)
              margin-top: 0.2rem
            &:last-child
              margin-bottom: 0.2rem
          .active2
            color: #3CAFFF
          .pic7
            margin-left: auto
            width 0.64rem
            height 0.64rem
</style>
